@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';

$illustration-height: 250px;

.editor-deprecation-dialog {

	&.components-modal__frame {
		border: none;

		@include break-small {
			width: 700px;
		}
	}

	.components-modal__content {
		@include break-small {
			width: 55%;
			padding: 48px 32px;
		}
	}

	.components-modal__header {
		background-color: transparent;
		border-bottom: none;
		padding: 0;
		margin: 0 0 24px;
		height: auto;

		h1 {
			font-size: $font-title-medium;
			font-weight: 400;
			height: auto;
			line-height: 1.2;
			font-family: $serif;
			margin-top: $illustration-height + 40px;

			@include break-small {
				margin-top: unset;
				font-size: $font-title-large;
			}
		}
	}

	p {
		margin-bottom: 24px;

		&.editor-deprecation-dialog__subhead {
			color: var( --color-neutral-50 );
		}
	}

	button {
		margin-right: 24px;
	}
}

.editor-deprecation-dialog__illustration {
	background: url( '/calypso/images/illustrations/block-library.svg' ) no-repeat;
	background-color: #007cba;
	background-origin: content-box;
	background-position: bottom;
	background-size: auto;
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	height: $illustration-height;
	width: 100%;
	padding-top: 16px;

	@include break-small {
		background-size: 70% auto;
		background-origin: unset;
		width: 45%;
		height: unset;
		padding: 0;
	}
}
